<template>
  <div class="dashboard-container">
    <common-view
      :table-prop="tableProp"
      :form-rules="formRules"
      module-name="roleList"
      :search="getRoleList"
      :add="addRole"
      :delete="deleteRole"
      :update="updateRole"
      :get-form-data="getFormData"
      :get-search-data="getSearchData"
    />

  </div>
</template>

<script>

import CommonView from '@/components/commonView/index.vue'
import { getRoleList, addRole, deleteRole, updateRole } from '@/api/role'

export default {
  name: 'RoleList',
  components: { 'common-view': CommonView },
  data() {
    return {
      getRoleList,
      addRole,
      deleteRole,
      updateRole,
      userList: [],
      professionList: [],
      tableData: [],
      tableProp: [
        {
          prop: 'id',
          label: 'id',
          width: 200
        },
        {
          prop: 'roleName',
          label: '角色名称',
          width: 200
        },
        {
          prop: 'roleCode',
          label: '角色标识',
          width: 200
        },
        {
          prop: 'permissionGroupList',
          label: '权限组'
        },
        {
          prop: 'roleDesc',
          label: '管理标识',
          width: 200
        }
      ],
      formRules: {
        customRoleName: [
          { required: true, message: '请输入角色名称', trigger: 'change' }
        ],
        roleName: [
          { required: true, message: '请输入角色名称', trigger: 'change' }
        ],
        roleCode: [
          { required: true, message: '请输入角色标识', trigger: 'change' }
        ],
        permissionGroupIdList: [
          { required: true, message: '请选择权限组', trigger: 'change' }
        ]
      }
    }
  },
  mounted() {
    // 数据初始化
    this.init()
  },
  methods: {
    init() {
      Promise.all([
        //
      ])
    },
    // 新增、编辑表单转换
    getFormData(formData, handle, id) {
      const { roleName, roleCode, permissionGroupIdList, permissionGroupList, roleDesc, customRoleName } = formData
      const newFormData = { roleName, roleCode, permissionGroupIdList, customRoleName, roleDesc }
      if (handle === 'edit') {
        const idList = []
        permissionGroupList.map((_) => {
          idList.push(_.id)
        })
        newFormData['permissionGroupIdList'] = idList
        newFormData['id'] = id
      }
      return newFormData
    },
    // 查询条件转换
    getSearchData(formData) {
      const { roleName } = formData
      return {
        roleName
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
}
</style>
